<template>
	<div class="boderbottom">
		<div>
			<span>
				<span class="questionTypeName">
					{{
						question.questionTypeName
					}}
				</span>
				<span v-if="question.questionstemType === 'L'">音频文件：</span>
				<ve-audio v-if="question.questionstemType === 'L'" :src="audioUrl(question.vid)" />

				<ve-parse-replace
					v-if="question.questionstemType === 'CF'"
					:article="question.questionstemContentTitle"
					question-type="CF"
				/>
				<ve-parse-replace
					v-else-if="question.questionstemType === 'BC'"
					:article="question.questionstemContentTitle"
					question-type="BC"
				/>

				<ve-parse v-else :article="question.questionstemContentTitle" />

				<div
					v-for="(option,
						index) of question.questionstemContentOption"
					:key="index"
				>
					<div>
						<ve-parse :article="option.type" />:
						<ve-parse :article="option.content" />
					</div>
				</div>
			</span>
		</div>
	</div>
</template>
<script>
// 题库组合题型展示组件（不包含子题）
 import VeParseReplace from './veParseReplace.vue';
	export default {
        name:'qb-show-combination',
         components:{
            VeParseReplace
        },
		props: {
			question: {
				type: Object,
				default: () => {}
			}
		},
		computed: {
			audioUrl() {
				return function(url) {
					if (url && url.match(/^\d/g)) {
						return UrlUtil.getFileUrl(url);
					} else {
						return url;
					}
				};
			}
		}
	};
</script>
<style lang="less" scoped>
	.baseQuestion {
		line-height: 25px;
	}

	.colorred {
		color: red;
	}
	.questionTypeName {
		color: #1296db;
	}

	.calledcpunt {
		color: #1296db;
	}

	.questionlist {
		li {
			border-bottom: 1px dashed #ddd;
			&:last-child {
				border-bottom: 0;
			}

			.btngroup {
				position: relative;
				.deleteanddisable {
					width: 47px;
					position: absolute;
					right: 0;
					top: 25px;
					background: #fff;
					border: 1px solid #ccc;
					z-index: 33;
				}
			}
		}
	}
	.option-wrap {
		display: flex;
		flex-wrap: wrap;
		margin: 5px 0;
		.option-item {
			padding: 13px 10px;
			background: #1296db;
			margin-right: 10px;
			margin-bottom: 10px;
			color: #fff;
			font-size: 12px;
			border-radius: 1px;
			line-height: 0;
		}
	}
	/deep/.el-button + .el-button {
		margin-left: 0px;
	}
</style>
